<template>
    <div id="dialog">
      <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :center="center" :width="width">
<!--        插槽自定义表单-->
        <slot name="content"></slot>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">{{cancelButtonName}}</el-button>
          <el-button type="primary" @click="dialogFormVisible = false;$emit('determine', args)">{{determineButtonName}}</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "Dialog",
    data() {
      return {
        dialogFormVisible: false,
        args: null
      }
    },
    props: {
      formTitle: {
        type: String,
        default() {
          return '这是标题'
        }
      },
      cancelButtonName: {
        type: String,
        default() {
          return '取 消'
        }
      },
      determineButtonName: {
        type: String,
        default() {
          return '确 定'
        }
      },
      center: {
        type: Boolean,
        default() {
          return false
        }
      },
      width: {
        type: String,
        default() {
          return '30%'
        }
      },
    }
  }
</script>

<style scoped>

</style>
